<template>
  <h1>商品页面</h1>
  <div>

    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="商品名称" width="180" />
        <el-table-column prop="sale" label="商品售价" width="180" />
        <el-table-column prop="price" label="商品原价" width="180" />
        <el-table-column prop="image" label="商品图片" width="180" >
          <template #default="scope">
            <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.image"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                show-progress
                :initial-index="4"
                fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column prop="info" label="商品详情" width="180" />

        <el-table-column label="操作" width="180" >
          <template #default="scope">
            <el-button type="primary" @click="handleDetail(scope.row.id)">查看详情</el-button>
            <el-button type="warning" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>






  </div>

</template>

<script setup>
import { ref , onMounted ,reactive} from 'vue'
import axios from "axios";
import {useRouter} from "vue-router";

const tableData = ref([])
const router = useRouter()
function getData(){
  axios.get('http://localhost:8000/api/goods/').then(res=>{
    console.log(res)
    tableData.value = res.data
  })
}


function handleDetail(id){
  router.push({
    path: '/detail',
    query: {id: id}
  })
}




onMounted(
    ()=>{
      getData()
    })

</script>

<style scoped>

</style>